<template>
	<view class="container">
		<view class="item" v-for="(item,index) in list" :key="index" @tap="goDetail(item.id)">
			<image src="../../../static/images/index/announcement.png" mode=""></image>
			<view class="a" v-show="!item.is_read">

			</view>
			<view class="right">
				<view>
					<text>{{item.title}}</text>
					<text>{{item.content}}</text>
				</view>
				<text>{{item.add_time}}</text>
			</view>
		</view>
		<uni-load-more class="loadMore" iconType="circle" :status="loadStatus" :contentText="contentText"></uni-load-more>
	</view>
</template>

<script>
	import {
		announcementList
	} from "@/api/public.js"
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				list: [],
				pagesData: {
					page: 1,
					limit: 15,
				},
				loadStatus: "loading",
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多了"
				},
			}
		},
		onShow() {
			this.list = []
			this.pagesData.page = 1
			this.getList()
		},
		onReachBottom() {
			if (this.loadStatus == "more")
				(this.loadStatus = "loading"), this.getList();
		},
		methods: {
			getList() {
				announcementList(this.pagesData).then(res => {
					this.loadStatus = "more";
					this.list.push.apply(this.list, res.data);
					if (res.data.length < this.pagesData.limit) this.loadStatus = "noMore"; //判断所有数据是否加载完成；
					this.pagesData.page = this.pagesData.page + 1;
					if (this.list.length == 0) {
						this.nodata = true
						this.contentText.contentnomore = '暂无数据'
					} else {
						this.nodata = false
					}
				})
			},
			goDetail(id) {
				this.list.map((val,key)=>{
					if(val.id == id){
						val.is_read = 1;
						return
					}
					return
				})
				uni.navigateTo({
					url: "/pages/index/announcement/detail?id=" + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.item {
			padding: 0 30rpx;
			display: flex;
			justify-content: space-between;
			position: relative;

			image {
				margin-top: 25rpx;
				width: 80rpx;
				height: 80rpx;
			}

			.a {
				width: 20rpx;
				height: 20rpx;
				border-radius: 10rpx;
				background-color: #ff3d46;
				position: absolute;
				left: 30rpx;
				top: 24rpx;
			}

			.right {
				width: 590rpx;
				height: 130rpx;
				border-bottom: 1rpx solid #f5f5f5;
				display: flex;
				justify-content: space-between;

				view {
					width: 340rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;

					text:nth-of-type(1) {
						font-size: 28rpx;
						font-weight: bold;
						color: rgba(51, 51, 51, 1);
						height: 30rpx;
						line-height: 30rpx;
						overflow: hidden;
						display: block;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					text:nth-of-type(2) {
						margin-top: 6rpx;
						font-size: 24rpx;
						color: #666;
						height: 30rpx;
						line-height: 30rpx;
						overflow: hidden;
						display: block;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}

				>text {
					width: 250rpx;
					margin-top: 25rpx;
					font-size: 24rpx;
					color: rgba(153, 153, 153, 1);
				}
			}
		}
	}
</style>
